.loading-active{
    background: #FFFFFF;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    animation: fade-in; 
    animation-duration: .5s;
}
#load{
    position:relative;
    width: 42px;
    height: 42px;
    animation: load 5s infinite linear;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -23px;
}
#load span{
    width:20px;
    height:20px;
    position:absolute;
    background:red;
    display:block;
    animation: load_span 1s infinite linear;
}
#load span:nth-child(1){
  background:#2ecc71;
}
#load span:nth-child(2){
  left:22px;
  background:#9b59b6;
  animation-delay: .2s;
}
#load span:nth-child(3){
  top:22px;
  background:#3498db;
  animation-delay: .4s;
}
#load span:nth-child(4){
  top:22px;
  left:22px;
  background:#f1c40f;
  animation-delay: .6s;
}
@keyframes load {
    from {-ms-transform: rotate(0deg);}
    to {-ms-transform: rotate(360deg);}
}
@keyframes load_span {
   0% { transform:scale(1); }
   50% { transform:scale(0.5); }
   100% { transform:scale(1); }
}

@keyframes fade-in {  
    0% {opacity: 0;}
    40% {opacity: 0;}  
    100% {opacity: 1;}
}